/*
 * 检测项关联产品标签
 * @Author: zfx
 * @Date: 2018-07-26 13:48:51
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-video-edit {
        .form-edit {
			width: 390px;
        }
    }

</style>
<template>
	<div class="v-admin-video-edit">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="100"
					name="edit-form"
					class="form-edit">

					<Form-item
						:label="$t('test_product_label.select_product_label')"
						prop="select_product_tags">
						<Select
							v-model="formValidate.select_product_tags"
							name="edit-select_product_tags"
							clearable
							multiple>
							<Option
								v-for="( item , key ) in productTags"
								:value="String(item.id)"
								:key="key">{{ item.name }}</Option>
						</Select>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">{{ $t('common.update') }}</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

export default {
	name: 'TestProductLabelEdit',
	props: {
		productTagDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		productTags: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			formValidate: {
				select_detector: '',

				select_skin: '',

				select_product_tags: [],
			}, // 修改产品标签时的表单

			skin_id: '', // 肤质ID

			ruleValidate: { // 表单验证规则
				select_product_tags: [
					{
						// required: true,
						type: 'array',
						message: this.$t('validate.required', { field: this.$t('test_product_label.select_product_label') }),
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	watch: {
		productTagDetail() {
			if (this.productTagDetail && Object.keys(this.productTagDetail).length > 0) {
				this.formValidate.select_product_tags = this.productTagDetail.product_tags.map(category => String(category.id));
				this.skin_id = this.productTagDetail.product_tags[0].pivot.skin_detection_item_id;
			}
		},
	},
	methods: {

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.dataPost();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.skin_show = false;
			this.product_show = false;
		},

		/**
         * post数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = this.formDataCreate();

			this.$emit('update', this.skin_id, form_data);
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {

				_method: 'PUT',

				product_tag_ids: this.formValidate.select_product_tags,

			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'product_tag_ids':

					new_object[key].forEach((tag, index) => {
						form_data.append(`${key}[${index}]`, tag);
					});

					break;

				default:

					form_data.append(key, new_object[key]);

					break;
				}
			});
			return form_data;
		},

	},
};
</script>
